<script setup>
import {onShow} from '@dcloudio/uni-app';
import {ref} from 'vue';
import {AI_URL, BASE_URL} from "../../utils/api";

const currentTime = ref();

onShow(() => {
  setInterval(() => {
    const nows = new Date();
    currentTime.value = `${nows.getMonth() + 1}/${nows.getDate()}/${nows.getFullYear()}`;
  });
});

const messageList = ref([{id: 0, content: '你好呀！我是你的AI导游叁叁。很高兴为你介绍龙川的红色景点。你可以随时向我提问哦！那么，你想了解什么呢？'}]);

const userInput = ref('');

// 生成回答中
const loading = ref(false);

const sendMessage = () => {
  if (!userInput.value) {
    uni.showToast({
      icon: 'none', title: '不能发送空消息喔~'
    });
    return;
  }

  // 添加用户输入到消息列表
  messageList.value.push({id: 1, content: userInput.value});
  const queryText = userInput.value;
  userInput.value = '';
  loading.value = true;

  // 调用新接口
  uni.request({
    url: AI_URL, method: 'POST', data: {
      query: queryText
    }, success: (res) => {
      let answer = '';

      // 检查响应体是否存在且包含 answer 字段
      if (res.data && res.data.answer) {
        answer = res.data.answer;
      } else {
        answer = '参参暂无回复';
      }

      // 将 AI 回复添加至消息列表
      messageList.value.push({id: 0, content: answer});
      loading.value = false;
    }, fail: (err) => {
      console.error(err);
      messageList.value.push({id: 0, content: '请求失败，请稍后重试。'});
      loading.value = false;
    }
  });
};
</script>

<template>
  <view class = "aiTitleView flex center f-s-2 f-w-b">AI导游-叁叁</view>
  <view class = "flex pad-1 column center">
    <scroll-view scroll-y = "true" scroll-with-animation = "true">
      <view class = "flex column gap-3 pad-2" style = "height: 67vh; overflow-y: scroll">
        <text class = "f-s-1" style = "opacity: 0.5; align-self: center">{{ currentTime }}</text>
        <view :class = "item.id === 1 ? 'row-reverse' : 'ai-message-container'"
              class = "flex gap-1" v-for = "(item, index) in messageList" :key = "index">
          <image class = "userImage" :src = "item.id === 0 ? `${BASE_URL}/ai/ai.png` : `${BASE_URL}/ai/heard.png`"
                 mode = "aspectFit"></image>
          <view :class = "item.id === 0 ? 'aiMessage' : 'userMessage'" class = "f-s-1 contentText">{{ item.content }}
          </view>
        </view>
        <!-- 正在生成中 -->
        <view v-if = "loading" class = "ai-message-container flex gap-1">
          <view class = "flex gap-1" >
            <image class = "userImage" :src = "`${BASE_URL}/ai/ai.png`" mode = "aspectFit"></image>
            <view class = "aiMessage f-s-1 contentText">正在生成中...</view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>

  <view class = "flex j-c-s-b userInput">
    <input style = "width: 80%" v-model = "userInput" type = "text" placeholder = "继续提问吧"/>
    <button @click = "sendMessage()" class = "flex center"
            style = "background-color: #3d5328; border-radius: 8px; padding: 16rpx 16rpx; height: 60rpx">
      <uni-icons size = "18" color = "#fff" type = "paperplane"></uni-icons>
    </button>
  </view>
</template>

<style>
.aiTitleView {
  width: 100%;
  height: 250rpx;
  background: linear-gradient(180deg, #91a87b 0%, transparent 100%);
  color: #3b4d2a;
}

.userInput {
  font-size: 32rpx;
  width: 85%;
  padding: 24rpx;
  border-radius: 16px;
  box-shadow: rgba(0, 0, 0, 0.2) 2px 2px 5px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.userImage {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  background-color: #b6d6c8;
  border: #3b4d2a 1px solid;
}

.row-reverse {
  flex-direction: row-reverse;
}

.aiMessage {
  border: #3d5328 1px solid;
  padding: 16rpx;
  border-radius: 16px;
}

.userMessage {
  padding: 16rpx;
  border-radius: 16px;
  background-color: #e9edcc;
}

.contentText {
  max-width: 60%;
  color: #3d5328;
}

/* 添加这个新的样式类 */
.ai-message-container {
  align-items: flex-start;
}

/* 可选：调整AI消息框的最大宽度，以便更好地适应长内容 */
.aiMessage {
  border: #3d5328 1px solid;
  padding: 16rpx;
  border-radius: 16px;
  max-width: 70%;
  /* 增加最大宽度限制 */
}

/* 用户消息也建议增加最大宽度 */
.userMessage {
  padding: 16rpx;
  border-radius: 16px;
  background-color: #e9edcc;
  max-width: 70%;
}
</style>
